<template>
  <div class="init_main">
    <p class="name_sty">{{ name }}</p>
    <div class="query">
      <!-- 质控类型：
      <el-select
        v-model="query.filter.qcLevel"
        placeholder=""
        size="mini"
        @change="getQX"
      >
        <el-option label="一级质控流程" :value="1"> </el-option>
        <el-option label="二级质控流程" :value="2"> </el-option>
        <el-option label="三级质控流程" :value="4"> </el-option>
      </el-select> -->
      <!-- 科室：
      <el-select v-model="query.value" placeholder="" size="mini">
        <el-option label="test" value="test"> </el-option>
      </el-select>
      质控级别：
      <el-select v-model="query.value" placeholder="" size="mini">
        <el-option label="test" value="test"> </el-option>
      </el-select>
      状态：
      <el-select v-model="query.value" placeholder="" size="mini">
        <el-option label="test" value="test"> </el-option>
      </el-select> -->
      <!-- 任务名称：
      <el-input
        v-model="query.filter.Name"
        placeholder=""
        size="mini"
        style="width: 150px"
      ></el-input>
      机构：
      <el-cascader
        size="mini"
        :options="OrganTree"
        :props="{
          checkStrictly: true,
          value: 'Id',
          label: 'Name',
          children: 'Children',
        }"
        clearable
        v-model="checkHospitalId"
        @change="
          query.filter.checkHospitalId =
            checkHospitalId[checkHospitalId.length - 1]
        "
      ></el-cascader> -->
      <el-button
        plain
        size="mini"
        icon="el-icon-search"
        style="margin-left: 10px"
        @click="getList"
        :disabled="userQX.查询"
        >刷新</el-button
      >
      <!-- <el-button
        plain
        size="mini"
        icon="el-icon-plus"
        type="primary"
        @click="open_dialog('新增')"
        >新增</el-button
      > -->
      <!-- <el-button
        plain
        size="mini"
        icon="el-icon-edit"
        type="warning"
        @click="open_dialog('提交')"
        :disabled="userQX.查询"
        >修改</el-button
      > -->
      <!-- <el-button plain size="mini" icon="el-icon-delete" type="danger"
        >删除</el-button
      > -->
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        height="600"
        highlight-current-row
        @current-change="row_click"
      >
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="操作" label="操作">
          <template slot-scope="scope">
            <span style="color: blue"
              ><el-button type="text" @click="open_dialog(scope.row)"
                >填写</el-button
              ><el-button type="text" @click="print(scope.row)">打印</el-button
              ><el-button type="text" @click="print2(scope.row)"
                >下载</el-button
              ></span
            >
          </template>
        </el-table-column>
        <el-table-column prop="CreateUserName" label="创建人">
        </el-table-column>
        <el-table-column prop="CreateTime" label="创建时间"> </el-table-column>
        <el-table-column prop="HospitalName" label="医院名称">
        </el-table-column>
        <!-- <el-table-column prop="Status" label="状态">
          <template slot-scope="scope">
            {{ scope.row.Status | toStatus }}
          </template>
        </el-table-column> -->
        <el-table-column prop="Period" label="周期"> </el-table-column>
        <el-table-column prop="Reason" label="任务名称"> </el-table-column>
        <el-table-column prop="TemplateName" label="模板名称">
        </el-table-column>
        <el-table-column prop="SectionNames" label="科室名称">
        </el-table-column>
        <el-table-column prop="Reason" label="原因分析"> </el-table-column>
        <el-table-column prop="Improvement" label="整改措施"> </el-table-column>
        <el-table-column prop="ImprovementTime" label="整改措施时间">
        </el-table-column>
        <el-table-column prop="ImprovementPersonName" label="整改措施人">
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange_page"
        :current-page="query.CurrentPage"
        :page-sizes="[10, 15, 50, 100]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="query.total"
      >
      </el-pagination>
    </div>
    <!-- 弹层 -->
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <div style="height: 630px; overflow: auto">
        <table class="tablesty" style="width: 100%">
          <tr>
            <td class="tac brm brb" style="width: 15%">时间：</td>
            <td class="brb" style="width: 85%">
              {{ dialog_form.TaskGroup.CreateTime }}
            </td>
          </tr>
          <tr>
            <td class="tac brm brb" style="width: 15%">科室：</td>
            <td class="brb" style="width: 85%">
              {{ dialog_form.TaskGroup.SectionNames }}
            </td>
          </tr>
          <tr>
            <td class="tac brm" style="width: 15%">模板：</td>
            <td style="width: 85%">{{ dialog_form.TaskGroup.TemplateName }}</td>
          </tr>
        </table>
        <div class="table">
          <el-table
            :data="dialog_form.ProblemList"
            border
            style="width: 100%"
            :span-method="objectSpanMethod"
          >
            <el-table-column prop="Project" label="项目" align="center">
            </el-table-column>
            <el-table-column prop="CheckSection" label="科室" align="center">
            </el-table-column>
            <el-table-column
              prop="CheckedUsers"
              label="被调查者"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.PatientBedNo }}
                {{ scope.row.PatientName }} <br />
                住院号:{{ scope.row.PatientInHospitalNo }}
              </template>
            </el-table-column>
            <el-table-column
              prop="ProblemContent"
              label="存在问题"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="" label="数量" align="center">
              <template slot-scope="scope">
                {{ courseArr[scope.$index] }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <table border style="width: 100%">
          <tr>
            <td class="tac brm brb" style="width: 15%">原因分析：</td>
            <td class="brb" style="width: 85%">
              <el-input
                type="textarea"
                :rows="6"
                v-model="dialog_form.TaskGroup.Reason"
              ></el-input>
            </td>
          </tr>
          <tr>
            <td class="tac brm brb" style="width: 15%">整改措施：</td>
            <td class="brb" style="width: 85%">
              <el-input
                type="textarea"
                :rows="6"
                v-model="dialog_form.TaskGroup.Improvement"
              ></el-input>
            </td>
          </tr>
          <tr>
            <td colspan="2" style="text-align: right">
              整改时间：
              <el-date-picker
                v-model="dialog_form.TaskGroup.ImprovementTime"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                size="small"
              >
              </el-date-picker>
            </td>
          </tr>
        </table>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="btn_ok()" size="mini" type="success"
          >确 定</el-button
        >
        <!-- <el-button type="danger" @click="btn_ok(0)" size="mini"
          >驳 回</el-button
        > -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      query: {
        CurrentPage: 1,
        pageSize: 10,
        total: 0,
        filter: {
          //   status: 41,
          SystemCategory: "质量检查",
          checkHospitalId: window.localStorage.getItem("hospitalId"),
          //   qcLevel: 1,
          menuName: "护理部汇总",
        },
      },
      tableData: [],
      dialogVisible: false,
      dialog_title: "",
      row_info: null,
      form: {},
      OrganTree: [],
      checkHospitalId: window.localStorage.getItem("hospitalId"),
      userQX: {},
      dialog_form: {
        TaskGroup: {},
      },
    };
  },
  mounted() {
    this.name = this.$route.meta.title;
    this.getQX();
    this.getOrgan();
  },
  filters: {
    toStatus(val) {
      var str = "";
      if (val == 0) {
        str = "未发布";
      }
      if (val == 1) {
        str = "开始调查";
      }
      if (val == 10) {
        str = "继续调查";
      }
      if (val == 20) {
        str = "待提交";
      }
      if (val == 30) {
        str = "审核提交";
      }
      if (val == 31) {
        str = "整改措施";
      }
      if (val == 32) {
        str = "病区跟踪检查";
      }
      if (val == 33) {
        str = "护理部跟踪检查";
      }
      if (val == 40) {
        str = "完成";
      }
      if (val == 41) {
        str = "审核下发";
      }
      if (val == 42) {
        str = "原因分析";
      }
      return str;
    },
  },
  methods: {
    getQX() {
      var data = {
        查询: false,
        新增: false,
        修改: false,
        删除: false,
      };
      this.userQX = data;
      this.getList();
      return;
      this.$get(
        "/Task/GetPermission/" + this.query.filter.qcLevel + "/护理部汇总"
      ).then((res) => {
        var list = res.Data;
        var data = {
          查询: true,
          新增: true,
          修改: true,
          删除: true,
        };
        for (var item in list) {
          console.log(item);
          if (list[item] == "查看") {
            data.查询 = false;
            this.getList();
          }
          if (list[item] == "新增") {
            data.新增 = false;
          }
          if (list[item] == "编辑") {
            data.修改 = false;
          }
          if (list[item] == "删除") {
            data.删除 = false;
          }
        }
        this.userQX = data;
        console.log(data);
      });
    },
    getOrgan() {
      this.$get("/Task/GetOrganTree?id=3015").then((res) => {
        this.OrganTree = res.Data;
      });
    },
    getList() {
      this.$post("/TaskGroup/GetPageList", this.query).then((res) => {
        this.tableData = res.Data.PageList;
        this.query.total = res.Data.Total;
      });
    },
    open_windo(url) {
      window.open(url);
    },
    row_click(row) {
      if (!row) {
        this.row_info = null;
        return;
      }
      this.row_info = row;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    btn_ok() {
      var body = this.dialog_form.TaskGroup;

      this.$put("/TaskGroup/Update", body).then((res) => {
        this.getList();
        this.handleClose();
      });
    },
    print(val) {
      console.log(val);
      window.open(baseUrl.bsIp + "/api/Pdf/HLBDownload?taskGroupId=" + val.Id);
    },
    print2(val) {
      console.log(val);
      window.open(
        baseUrl.bsIp +
          "/api/Excel/DownloadWordFromTemplateBytes?taskGroupId=" +
          val.Id
      );
    },
    open_dialog(val) {
      this.$get("/TaskGroup/GetData/" + val.Id).then((res) => {
        this.dialog_form = res.Data;
        this.courseinit();
      });
      this.form = val;
      this.dialogVisible = true;
      return;
      this.form = this.row_info;
      this.dialog_title = val + "模板组";
      if (val == "新增") {
        this.dialogVisible = true;
        return;
      }
      if (val == "提交") {
        this.form = this.row_info;
        this.dialogVisible = true;
      } else {
        this.$notify.error({
          title: "错误",
          message: "请选择一条数据后操作！",
        });
        return;
      }
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.query.CurrentPage = 1;
    },
    handleCurrentChange_page(val) {
      this.query.CurrentPage = val;
      this.getList();
    },
    to_Ti(row) {
      this.$router.push("/Ti_zljc?btn=2&taskDataId=" + row.Id);
    },
    courseinit() {
      // 首先初始化
      var _this = this;
      this.courseArr = [];
      this.coursePos = 0;
      for (var i = 0; i < _this.dialog_form.ProblemList.length; i++) {
        //判断是否是第一行
        if (i === 0) {
          //导入第一行数据
          _this.courseArr.push(1);
          _this.coursePos = 0;
        } else {
          //不是第一行时，就根据标识去存储，course为我第一行的prop属性的值
          if (
            _this.dialog_form.ProblemList[i].Project ===
            _this.dialog_form.ProblemList[i - 1].Project
          ) {
            // 查找到下一行的数据等于上一行的数据时每次要把之前存储的数据+1
            _this.courseArr[_this.coursePos] += 1;
            _this.courseArr.push(0);
          } else {
            // 没有相同的数据时候，要记住当前的index
            _this.courseArr.push(1);
            _this.coursePos = i;
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 4) {
        const row1 = this.courseArr[rowIndex];
        const col1 = row1 > 0 ? 1 : 0;
        return {
          rowspan: row1,
          colspan: col1,
        };
      }
    },
  },
};
</script>

<style scoped lang='scss'>
.init_main {
  background-color: #fff;
  height: calc(100vh - 60px);
  border: 1px solid #333;
  border-radius: 5px;
  margin: 5px;
  padding: 10px;
  font-family: "FangSong";
  color: #000;
  .name_sty {
    color: #000;
    font-weight: 700;
    font-size: 18px;
    font-family: "FangSong";
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
  }
  .table {
    margin-top: 15px;
  }
  .page {
    text-align: right;
  }
}
::v-deep .el-table__body tr.current-row > td.el-table__cell {
  background-color: rgb(208, 229, 250);
  color: rgb(65, 158, 255);
  font-weight: 700;
}
.tac {
  text-align: center;
}
.tablesty {
  td {
    display: inline-block;
    padding: 3px;
    border: 1px solid #666;
  }
  .brm {
    border-right: none;
    font-weight: 700;
    color: #000;
  }
  .brb {
    border-bottom: none;
  }
  b {
    text-align: center;
  }
}
::v-deep .el-textarea.is-disabled .el-textarea__inner {
  color: #000 !important;
}
</style>